<template>
  <div class="box-archive">
    <!-- 博客归档  所有的博客目录 -->
    <div class="year-item" v-for="item in years">
      <div class="box-left">{{ item }}</div>
      <div class="box-right" @click="showContent(d.id)" v-for="d in renderData[item]">
        <div class="time">{{ d.time }}</div>
        <div class="title">{{ d.title }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'BlogArchive',
  data() {
    return {
      renderData: [],
      years: [],
    }
  },
  created() {
    this.getAllBlog()
  },
  methods: {
    getAllBlog() {
      let obj = {}
       this.$axios.get('/getAllBlog').then((data) => {
        // 按照年份你分类处理
        if (data.status === 200) {
          data.data.forEach((val) => {
            const year = this.dayjs(val.createTime).format('YYYY')
            if (obj[year]) {
              obj[year].push(val)
            } else {
              obj[year] = [val]
            }
          })
          this.years = Object.keys(obj).sort((a, b) => {
            return b - a
          })
          this.renderData = obj
        }
      })
    },
    // 查看对应的内容
    showContent(id){
      console.log(id)
      this.$router.push({
        path: '/home/blogContent',
        query: {
          id: id
        }
      })
    }
  },
}
</script>

<style scoped lang="less">
.box-archive {
  font-size: 18px;
}
.box-right {
  cursor: pointer;
  font-size: 16px;
  display: flex;
  margin-left: 80px;
  margin-bottom: 10px;
}
.time {
  margin-right: 30px;
}
.title {
  color: #000;
}
.year-item {
  margin-bottom: 20px;
}
</style>
